<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/common/taglibs.jsp"%>
<script type="text/javascript" src="${ctx}/resources/js/datatable-query.js"></script>
<div class="row-fluid">
		<div class="span12">
			<div class="box gradient">
				<div class="title">
					<h4><span>Banner Group</span>
					</h4>
					<a href="#" class="minimize">Minimize</a>
				</div>
				<div class="content scrollable clearfix">
					<table class="ajaxTable display table table-bordered">
						<thead>
							<tr>
								<th><a id="select_all"><span class="icomoon-icon-checkmark-2"></span></a></th>
								<th>Name </th>
								<th>Description</th>
								<th>Action</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			
</div>

<a href="#newBannerGroup"  data-toggle="modal" class="btn btn-info"> <span
	class="icon12 icomoon-icon-plus white"></span> New</a>
</div>

<script type="text/javascript">







$(document).ready(function () {
	johnny.oTable = $('.ajaxTable').dataTable({
		"bLengthChange": true,
		"sAjaxSource": '${ctx}/admin/banner-group/',
		"aoColumnDefs": [
			       		  { 'bSortable': false, 'aTargets': [0,3] }
			       		],
		"fnInitComplete": function (oSettings, json) { }
	});
	var name = $("<input>").attr({
		type: "text",
		field: "name",
		op: "cn",
		placeholder: "Group Name",
		class: "filterdata"
	});
	johnny.initTableQuery(name);
 	
	var config = {
			id : 'del',
			text  : 'Del',
			domain : "Banner",
			operation : "Delete",
			url : "${ctx}/admin/banner-group/del/"
	};
	johnny.tableBtn(config);
	
	$('#confirmBannerGroup').click(function(){
		$.ajax({
			url : "${ctx}/admin/banner-group/create/",
			type : "POST",
			data : $('#bannerGroupForm').serialize(),
			dataType : "json",
			success : function(data){		
				if(data && data.state && (data.state.indexOf("ERROR") != -1)){
					johnny.error(data.message);
					return;
				}else{
					$("#newBannerGroup").modal('hide');
 					johnny.oTable.fnDraw();
					johnny.info("create new Group successfully");
					}
			}
		});


	});
	
 	
});
 

var columnHeader = ['name', 'description'];
var QueryData = function (aoData) {
	return johnny.initQueryData(aoData, columnHeader);
}

var DataTableForm = function (json, echo) {
	var dataArray = new Array();
	for (var i = 0; i < json.result.length; i++) {
		var subArray = new Array();
		var value = johnny.getForSelect(json.result[i].id);
 		subArray.push(value);
		var link = "${ctx}/admin/banner-group/"+json.result[i].id+"/edit/";
		subArray.push(json.result[i].name);
		subArray.push(json.result[i].description);
		subArray.push(johnny.getEditHtml(link));
		dataArray.push(subArray);
	}
	return {
		sEcho: echo,
		iTotalRecords: json.totalCount,
		iTotalDisplayRecords: json.totalCount,
		aaData: dataArray
	};
}
</script>
<div id="newBannerGroup" class="modal hide fade" style="display: none; ">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">
			<span class="icon12 minia-icon-close"></span>
		</button>
		<h3>New Banner Group </h3>
	</div>
	<div class="modal-body">
 				<form method="post" id="bannerGroupForm">
						<div class="form-row row-fluid">
							<label class="form-label span4">Name</label>
							<input class="span8" name="name" />
						</div>
						<div class="form-row row-fluid">
							<label class="form-label span4">Description</label>
							<input class="span8" name="description"  />
						</div>
				</form>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" data-dismiss="modal">Close</a>
		<a href="#" id ="confirmBannerGroup" class="btn btn-primary">Save changes</a>
	</div>
</div>